<template lang="html">
  <div class="top-nav clearfix">
    <router-link to="/center" tag="div" class="left-menu">
      <img src="../../../static/img/menu.png" alt="" />
    </router-link>
    <ul class="nav-box clearfix">
      <router-link to="/mine" tag="li">我的</router-link>
      <router-link to="/library" tag="li">乐库</router-link>
      <router-link to="/find" tag="li" class="last-mine">发现</router-link>
    </ul>
    <router-link to="/" tag="div" class="right-search">
      <img src="../../../static/img/search.png" alt="" />
    </router-link>
  </div>
</template>

<script>
export default {
  name: "TopNav",
  data () {
    return{}
  }
}
</script>

<style lang="less" scoped>
  .top-nav{
    width: 100%;
    height: 88/100rem;
    background-color: #632598;
    color: #ccc;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    .left-menu{
      float: left;
      width: 46/100rem;
      height: 37/100rem;
      margin-top: 25/100rem;
      margin-left: 20/100rem;
      img{
        width: 100%;
        height: 100%;
        float: left;
      }
    }
    .nav-box{
      float: left;
      margin-left: 79/100rem;
      li{
        float: left;
        font-size: 34/100rem;
        line-height: 88/100rem;
        margin-right: 123/100rem;
      }
      .last-mine{
        margin-right: 0;
      }
    }
    .right-search{
      float: right;
      width: 45/100rem;
      height: 45/100rem;
      margin-top: 25/100rem;
      margin-right: 20/100rem;
      img{
        width: 100%;
        height: 100%;
        float: left;
      }
    }
  }

  .active{
    color: #fff;
  }
</style>
